import { Button, Image, Modal } from 'antd';
import React, { Fragment, PureComponent } from 'react';
import DescriptionList from '../../../components/DescriptionList';
import MaskText from '@/components/MaskText';

const { Description } = DescriptionList;
class DetailModal extends PureComponent<any, any> {
  // 暂停其它文件播放
  pauseOther = (event: any) => {
    let audios = document.getElementsByName('commentAudio');
    audios.forEach((item: any) => {
      if (item !== event.currentTarget) {
        item.pause();
      }
    });
    event.stopPropagation();
    event.preventDefault();
  };

  render() {
    const { visible, data, changeVisible } = this.props;
    const files = data.files;
    let audioList = null;
    let imageList = null;
    let videoList = null;
    if (files && files.length > 0) {
      audioList = files.filter((item: any) => item.fileType === 3);
      imageList = files.filter((item: any) => item.fileType === 1);
      videoList = files.filter((item: any) => item.fileType === 2);
    }
    return (
      <Modal
        title="吐槽详情"
        width="700px"
        visible={visible}
        onCancel={() => changeVisible()}
        footer={[
          <Button key="back" type="primary" size="small" onClick={() => changeVisible()}>
            返回
          </Button>,
        ]}
      >
        <DescriptionList title="" col={2}>
          <Description term="问题编号">{data.infoId}</Description>
          <Description term="所属项目">{data.projectName}</Description>
          <Description term="手机号码">
            <MaskText text={data.mobile} type={'phone'} />
          </Description>
          <Description term="相关系统">{data.feedbackTypeName}</Description>
          <Description term="车主姓名">
            <MaskText text={data.realName} type={'name'} />
          </Description>
          <Description term="用户ID">
            <MaskText text={data.userId} type={'phone'} />
          </Description>
          <Description term="VIN">{data.vin}</Description>
          <Description term="PDSN">{data.pdsn}</Description>
          <Description term="软件版本">{data.softVersion}</Description>
          <Description term="反馈时间">{data.clientTime}</Description>
          <Description term="吐槽来源">{data.typeSourcesName}</Description>
          <Description term="吐槽类型">{data.feedbackSourceType}</Description>
        </DescriptionList>

        <DescriptionList title="" col={1} style={{ marginTop: 16 }}>
          <Description term="反馈内容">{data.messageContent}</Description>
          {/* <Description term="问题描述">{data.remark}</Description> */}
          <Description term="反馈文件">{files ? null : '无文件'}</Description>
          {audioList && audioList.length > 0 ? (
            <Description term="">
              {audioList.map((file: any, index: any) => {
                return (
                  <audio
                    name="commentAudio"
                    key={'audio' + index}
                    controlsList="nodownload"
                    controls={true}
                    onPlay={this.pauseOther}
                  >
                    <source src={file.fileUrl} type="audio/mpeg"></source>
                  </audio>
                );
              })}
            </Description>
          ) : null}
          {imageList && imageList.length > 0 ? (
            <Description term="">
              {imageList.map((file: any, index: any) => {
                return (
                  <Fragment>
                    <Image key={'image' + index} width={120} height={90} src={file.fileUrl} />
                    &nbsp;
                  </Fragment>
                );
              })}
            </Description>
          ) : null}
        </DescriptionList>
        {videoList && videoList.length > 0 ? (
          <DescriptionList title="" col={2} style={{ marginTop: 16 }}>
            {videoList.map((file: any, index: any) => {
              return (
                <Description term="">
                  <video
                    name="commentAudio"
                    key={'video' + index}
                    controlsList="nodownload"
                    controls={true}
                    onPlay={this.pauseOther}
                  >
                    <source src={file.fileUrl} type="audio/mpeg"></source>
                  </video>
                </Description>
              );
            })}
          </DescriptionList>
        ) : null}
      </Modal>
    );
  }
}
export default DetailModal;
